{% extends "../layouts/admin.html" %} {% block content %}

 <header class="header navbar bg-white shadow">
    
    <div class="pull-right offscreen-right">
      <button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
          class="fa fa-sliders"></i> 筛选
      </button>
    </div>
  </header>
<div class=panel-body style="padding-top: 50px;">
	<div class="table-responsive no-border">
		<input id="unitid" type="hidden">
		<table class="table table-bordered table-striped mg-t datatable">
			<thead>
				<tr>
					
					<th>用户名</th>
					<th>昵称</th>
					<th>代理级别</th>
					<th>分红比例</th>
					<th>启用状态</th>
					<th>创建时间</th>
					<th>操作</th>
		</table>
	</div>
</div>
<div class="cd-panel from-right">
  <header class="cd-panel-header">
    <h4>高级筛选</h4>
  </header>
  <div class="cd-panel-container">
    <div class="cd-panel-content shadow">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" onclick="this.value=''" class="form-control" placeholder="用户名/登录名" autofocus>
      </div>
      <div class="form-group">
        <label for="nickname">姓名</label>
        <input type="text" id="nickname" name="nickname" onclick="this.value=''" class="form-control" placeholder="姓名/昵称">
      </div>
      <div class="form-group">
        <label for="level">代理级别</label>
        <select name="level" id="level" class="form-control">
        	<option value=""  selected>级别</option>
									{% for item in agencyLevels %} 
									<option value="{{item.id}}">{{item.name}}</option>
									{% endfor %}
        </select>
        
      </div>
      <button id="searchBtn" type="button" class="btn btn-default">查询</button>
    </div>
  </div>
</div>
<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">删除代理</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						代理删除后无法恢复，确定删除已选代理吗？
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
			</div>
		</div>
	</div>
</div>

<div id="dialogEditlevel" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">修改代理级别</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12 form-horizontal parsley-form">
						<div class="form-group">
							<label for="editlevel" class="col-sm-2 control-label">级别</label>

							<div class="col-sm-8">
								<select name="editlevel" id="editlevel" class="form-control">
										{% for item in agencyLevels %} 
									<option value="{{item.id}}">{{item.name}}</option>
									{% endfor %}
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary" data-loading-text="正在更新...">确 定</button>
			</div>
		</div>
	</div>
</div>

<script language="JavaScript">
	var datatable;
	let agencyLevels = {{agencyLevels | stringify | safe }};
	let agencyLevelsObj = {};
	for(let i=0;i<agencyLevels.length;i++){
		agencyLevelsObj[agencyLevels[i].id] = 	agencyLevels[i];		
	}

	function initDatatable() {
		datatable = $('.datatable').DataTable({
			"dom": '<"toolbar">frtip',
			"searching": false,
			"processing": false,
			"serverSide": true,
			"select": true,
			"ordering": true,
			"language": {
				"url": "/assets/plugins/datatables/cn.json"
			},
			"preDrawCallback": function() {
				sublime.showLoadingbar($(".main-content"));
			},
			"drawCallback": function() {
				sublime.closeLoadingbar($(".main-content"));
			},
			"ajax": {
				"url": "/system/agency/index",
				"type": "post",
				"data": function(d) {
					 d.username = $('#username').val();
          d.nickname = $('#nickname').val();
          d.level = $('#level').val();
				}
			},
			"order": [
				[5, "desc"]
			],
			"columns": [{
					"data": "username",
					"bSortable": true
				},
				{
					"data": "nickname",
					"bSortable": true
				},
				{
					"data": "level",
					"bSortable": true
				},
				{
					"data": "level",
					"bSortable": false
				},
				{
					"data": "status",
					"bSortable": true
				},
				
				{
					"data": "create_time",
					"bSortable": true
				}
				
				
			],
			"columnDefs": [
			{
					"render": function(data, type, row) {
         			if(data.length>10){
         					return data.slice(0,10)+'…';
         				}
						return data;
					},
					"targets": 0
				},
			{
					"render": function(data, type, row) {

						return agencyLevelsObj[row.level].name;
					},
					"targets": 2
				},
				{
					"render": function(data, type, row) {
						
							
							return agencyLevelsObj[row.level].rebate_ratio;
					},
					"targets": 3
				},
				{
          "render": function (data, type, row) {
            if (data) {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
            } else {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
            }
          },
          "targets": 4
        },
        {
					"render": function(data, type, row) {
						
						return sublime.datetime(data);
					},
					"targets": 5
				},
				{
					"render": function(data, type, row) {
						
						return '<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
							' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
							'<li><a href="javascript:;" onclick="editlevel(' + row.id + ','+row.level+')">修改</a></li>' +
							'<li><a onclick="del(' + row.id + ')">删除</a></li>'+
							'<li><a href="javascript:;" onclick="enable(' + row.id + ')">启用</a></li>' +
							
              '<li><a href="javascript:;" onclick="disable(' + row.id + ')">禁用</a></li>' +
							
							'</ul></div>';
					},
					"targets": 6
				}
			]
		});
		datatable.on('click', 'tr', function() {
			$(this).toggleClass('selected');
		});
		$("#searchBtn").on('click', function() {
			datatable.ajax.reload();
		});
	}
function del(id) {
		var dialog = $("#dialogDelete");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		
		
		dialog.find("#ok").bind("click", function(event) {
			var btn = $(this);
			btn.button("loading");
			
			$.post("/system/agency/delete", {id:id }, function(data) {
				if(data.errno == 0) {
					datatable.ajax.reload(null, false);
				} else {
					Toast.error(data.errmsg);
				}
				//重置按钮状态，关闭提示框
				btn.button("reset");
				dialog.modal("hide");
			}, "json");
		});
	}
function enable(id) {
    $.post("/system/agency/status", {id:  id,status: 1}, function (data) {
      if (data.errno == 0) {
        $("#disable_" + id).attr("class", "fa fa-circle text-success ml5");
      } else {
        Toast.error(data.errmsg);
      }
    }, "json");
  }
  function disable(id) {
    $.post("/system/agency/status", {id:  id,status: 0}, function (data) {
      if (data.errno == 0) {
        $("#disable_" + id).attr("class", "fa fa-circle text-danger ml5");
      } else {
        Toast.error(data.errmsg);
      }
    }, "json");
  }
  
  
function editlevel(id,l) {
		var dialog = $("#dialogEditlevel");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		dialog.find("#editlevel").val(l);
		
		dialog.find("#ok").bind("click", function(event) {
			var btn = $(this);
			btn.button("loading");
			var level = dialog.find("#editlevel").val();
			$.post("/system/agency/edit", {id:id,level:level }, function(data) {
				if(data.errno == 0) {
					datatable.ajax.reload(null, false);
				} else {
					Toast.error(data.errmsg);
				}
				//重置按钮状态，关闭提示框
				btn.button("reset");
				dialog.modal("hide");
			}, "json");
		});
	}

	$(function() {
		initDatatable();
	});
</script>
{% endblock %}